@charset "utf-8";
@import url("resect.css");
/*resect  CSS*/
body {
	color: #333333;
	text-decoration: none;
	font-family:Verdana, "微軟正黑體", "新細明體", Arial, Helvetica, sans-serif;
	line-height: 150%;
	font-size: 16px;
	background-color: #d0d0d0;
	}

a {
	text-decoration: none;
	color: #FFF;
}
a:hover {
	text-decoration: none;
	color: #FC0;
}
.text_style_1 {
	font-weight: bold;
	color: #893e9b;
}

.homepage_bg {
	background-image: url(../images/homepage_bg.jpg);
	height: 835px;
	width: 100%;
	background-repeat: no-repeat;
	background-position: center top;
	min-height:835px;/*最小高*/
	min-width:1000px;/*最小寬*/
}
.homepage_bg_1 {
	background-image: url(../images/homepage_02.png);
	background-repeat: no-repeat;
	background-position: center top;
	min-height:835px;/*最小高*/
	min-width:1000px;/*最小寬*/
}
#homepage_header {
	height: 650px;
	width: 100%;
	position: relative;
}
.homepage_header_box {
	background-image: url(../images/homepage_01.png);
	background-repeat: no-repeat;
	height: 220px;
	width: 600px;
	position: absolute;
	right: 55px;
	bottom: 45px;
	padding-top: 90px;
	padding-left: 45px;
	font-size: 16px;
	color: #333;
	font-family: "微軟正黑體";
	line-height: 26px;
	font-weight: bold;
}
.purple_1 {
	color: #5b30a2;
}
.purple_2 {
	color: #a32e91;
}


#wrapper_bg {
	background-image: url(../images/bg.jpg);
	background-repeat: no-repeat;
	background-position: center top;
}


#wrapper {
	width: 1000px;
	margin-right: auto;
	margin-left: auto;/*最小高*/
	min-width:1000px;/*最小寬*/
	position: relative;
}
#header {
	height: 325px;
}

.header_box {
	position: relative;
	height: 100%;
	width: 100%;
}
.slogan {
	position: absolute;
	height: 345px;
	width: 492px;
	left: 278px;
	top: 62px;
}
.logo {
	position: absolute;
	height: 65px;
	width: 200px;
	left: -6px;
	z-index: 10;
}
.fb {
	position: absolute;
	height: 30px;
	width: 133px;
	left: 200px;
	top: 27px;
	z-index: 10;
}


#menu {
	height: 90px;
	background-image: url(../images/menu_bg.png);
	width: 1000px;
}
	.m_box{
	height: 90px;
	width: 100%;
	list-style:none;
	padding-left: 135px;
	}
	.m_box li {
	float: left;
	}
	.m_box li a {
	display:block;
	height:90px;
	text-indent:-9999px;
	background-image:url(../images/menu.png);
	}

	.m_box_1 a {
	background-position:-150px 0px;
	width: 75px;
}
	.m_box_2 a {
	background-position:-215px 0px;
	width: 100px;
}
	.m_box_3 a {
	background-position:-312px 0px;
	width: 150px;
}
	.m_box_4 a {
	background-position:-462px 0px;
	width: 190px;
}
	.m_box_5 a {
	background-position:-652px 0px;
	width: 120px;
}
	.m_box_6 a {
	background-position:-785px 0px;
	width: 120px;
}
	
	.m_box_1 a:hover { background-position:-150px -92px;}
	.m_box_2 a:hover { background-position:-215px -92px;}
	.m_box_3 a:hover { background-position:-312px -92px;}
	.m_box_4 a:hover { background-position:-462px -92px;}
	.m_box_5 a:hover {
	background-position:-652px -92px;
}
	.m_box_6 a:hover { background-position:-785px -92px;}

#content {
	width: 906px;
	padding-left: 47px;
	padding-right: 47px;
}

.tab_bg {
	background-image: url(../images/tab_2.png);
	background-repeat: repeat-y;
	width: 906px;
}
.activity_1 {
	position: relative;
	width: 906px;
}

.explain {
	position: absolute;
	width: 428px;
	height: 54px;
	left: 380px;
	top: 37px;
}
.youtube_tv {
	position: absolute;
	left: 174px;
	top: 129px;
	width: 560px;
	height: 315px;
}
.btn_1 {
	height: 50px;
	width: 220px;
	left: 341px;
	top: 1147px;
	font-size: 24px;
	line-height: 50px;
	text-align: center;
	color: #FFF;
	background-image: url(../images/btn_1.png);
	position: absolute;
}

.activity_2 {
	position: relative;
	width: 906px;
	height: 835px;
}
.bear_qa {
	background-image: url(../images/bear_1.png);
	height: 273px;
	width: 221px;
	position: absolute;
	left: 771px;
	top: 540px;
}

.qa_box {
	background-image: url(../images/qa_bg.png);
	height: 126px;
	width: 635px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 10px;
	position: relative;
	font-size: 17px;
	line-height: 24px;
	color: #FFF;
	padding-left: 22px;
	padding-right: 22px;
	padding-top: 10px;
}
.answer {
	color: #FCD600;
	position: absolute;
	height: 30px;
	left: 402px;
	top: 84px;
	line-height: 30px;
}
.answer input{
	position: absolute; left: -1000px; top:0;
	opacity: 0.1;
}

.answer label {
	display: inline-block;
	text-indent: -9999px;
	height:30px;
	width: 30px;
	background: url(../images/yes.png)  no-repeat left top;
}
.answer  .a-no{
	background-image: url(../images/no.png);
	margin-left: 3px;
}
.answer label:hover, .answer label:focus , .answer label.curr{
	background-position: left bottom;
	}


.btn_2 {
	height: 50px;
	width: 220px;
	left: 340px;
	top: 770px;
	font-size: 24px;
	line-height: 50px;
	text-align: center;
	color: #FFF;
	background-image: url(../images/btn_1.png);
	position: absolute;
}

.activity_2 {
	position: relative;
	width: 906px;
}
.activity_3 {
	position: relative;
	width: 906px;
	height: 300px;
}
.btn_3 {
	height: 50px;
	width: 220px;
	left: 340px;
	top: 165px;
	font-size: 24px;
	line-height: 50px;
	text-align: center;
	color: #FFF;
	background-image: url(../images/btn_1.png);
	position: absolute;
}
.activity_4 {
	position: relative;
	width: 906px;
}
.activity_4 .date {
	height: 154px;
	width: 300px;
	position: absolute;
	left: 366px;
	top: 181px;
}
.activity_4 .date div {
	margin-bottom: 12px;
}
.activity_4 .date div input {
	width: 280px;
	background-color: #F3F3F3;
	height: 25px;
	border: 1px solid #D0D0D0;
}
.activity_4 .date2 {
	position: absolute;
	height: 58px;
	width: 326px;
	left: 248px;
	top: 342px;
	font-size: 15px;
	line-height: 24px;
}




.btn_4 {
	height: 50px;
	width: 220px;
	left: 540px;
	top: 423px;
	font-size: 24px;
	line-height: 50px;
	text-align: center;
	color: #FFF;
	background-image: url(../images/btn_1.png);
	position: absolute;
}
.helmet_design_1 {
	position: relative;
	width: 906px;
	height: 480px;
}
.step1 {
	background-image: url(../images/step1.png);
	background-repeat: no-repeat;
	height: 98px;
	width: 285px;
	display: block;
	font-size: 22px;
	color: #FFF;
	line-height: 98px;
	text-align: center;
	position: absolute;
	left: 166px;
	top: 335px;
}
.step2 {
	background-image: url(../images/step2.png);
	background-repeat: no-repeat;
	height: 98px;
	width: 285px;
	display: block;
	font-size: 22px;
	color: #FFF;
	line-height: 98px;
	text-align: center;
	position: absolute;
	top: 335px;
	right: 166px;
}
.helmet_design_2 {
	position: relative;
	width: 906px;
	height: 900px;
}
.helmet_design_2 .date {
	height: 365px;
	width: 594px;
	position: absolute;
	left: 157px;
	top: 444px;
}
.helmet_design_2 .date table td {
	height: 26px;
	font-size: 15px;
	line-height: 26px;
}
.btn_5 {
	position: absolute;
	height: 40px;
	width: 134px;
	left: 305px;
	top: 842px;
	line-height: 40px;
	background-image: url(../images/btn5.png);
	background-repeat: no-repeat;
	text-align: center;
}
.btn_6 {
	position: absolute;
	height: 40px;
	width: 134px;
	left: 461px;
	top: 843px;
	line-height: 40px;
	background-image: url(../images/btn5.png);
	background-repeat: no-repeat;
	text-align: center;
}




.helmet_design_3 {
	position: relative;
	width: 906px;
}
.helmet_design_4 {
	position: relative;
	width: 906px;
}
.activity_5 {
	position: relative;
	width: 906px;
}
.activity_6 {
	position: relative;
	width: 906px;
}
.ac{
	width: 863px;
	margin-right: auto;
	margin-left: auto;
}
.ac_btn {
	position: absolute;
	height: 37px;
	width: 340px;
	left: 527px;
	top: 4px;
	background-image: url(../images/ac_btn.png);
	background-repeat: no-repeat;
	line-height: 37px;
}
.ac_btn1 {
	text-align: center;
	width: 132px;
	display: block;
	float: left;
}
.ac_btn2 {
	text-align: center;
	display: block;
	width: 200px;
	float: right;
}
.gallery_1 {
	width: 852px;
	height:615px;
	margin-right: auto;
	margin-left: auto;
}
.title {
	position: relative;
}
.title .sequence {
	position: absolute;
	height: 30px;
	/*width: 238px;
	left: 614px;*/
	width: 420px;
	left: 440px;
	top: 13px;
	line-height: 30px;
}
.title .sequence a {
	color: #333333;
	text-align: right;
}

.title .sequence a:hover {
	color: #333333;
	text-align: right;
	text-decoration: underline;
}

.photo {
	float: left;
	height: 197px;
	width: 262px;
	margin-right: 10px;
	margin-left: 10px;
	margin-top: 10px;
	margin-bottom: 40px;
	background-color: #FFF;
	border: 1px solid #c0a3c7;
	position: relative;
}
.photo .text {
	position: absolute;
	height: 30px;
	width: 96px;
	left: 6px;
	top: 199px;
	line-height: 30px;
}
.photo_fb {
	position: absolute;
	height: 28px;
	width: 141px;
	left: 120px;
	top: 203px;
	line-height: 35px;
	text-align: right;
}


.page_numbers {
	height: 50px;
	line-height: 30px;
	padding-top: 30px;
	text-align: center;
}

.page_numbers a {
	color: #333333;
	text-decoration: none;
	margin-top: 0;
	margin-right: 1px;
	margin-bottom: 0;
	margin-left: 1px;
	line-height: 13px;
	padding-top: 4px;
	padding-right: 6px;
	padding-bottom: 4px;
	padding-left: 6px;
}

.page_numbers a:hover{
	text-decoration: underline;
	color: #333;
}
a.page_numbers_in {
	background-color: #D0D0D0;
}



.gallery_2 {
	width: 846px;
	height:520px;
	margin-right: auto;
	margin-left: auto;
	background-image: url(../images/bear.png);
	background-repeat: no-repeat;
	background-position: right bottom;
}
.fb_author {
	position: absolute;
	height: 30px;
	width: 125px;
	left: 627px;
	top: 814px;
}

.big_pgoto {
	position: absolute;
	height: 347px;
	width: 462px;
	top: 485px;
	border: 1px solid #c0a3c7;
	left: 87px;
}
.author {
	position: absolute;
	height: 257px;
	width: 362px;
	top: 480px;
	left: 561px;
	font-size: 16px;
}
.author div {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #c0a3c7;
	padding-top: 5px;
	padding-bottom: 5px;
}
.lightbox_qa {
	height: 452px;
	width: 779px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
}
.lightbox_qa .btn_7 {
	font-size: 18px;
	line-height: 50px;
	background-image: url(../images/btn_1.png);
	position: absolute;
	display: block;
	height: 50px;
	width: 220px;
	text-align: center;
	left: 352px;
	top: 267px;
}









#footer {
	height: 70px;
	width: 1000px;
	position: relative;
}
#footer .number {
	position: absolute;
	left: 751px;
	top: 39px;
	font-size: 12px;
	text-align: right;
	width: 120px;
}